<!--
 * @Author: liubei
 * @Date: 2021-08-04 17:42:40
 * @LastEditTime: 2021-08-06 11:17:29
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var url = 'http://localhost:8210/demo'
    </script>
    <script>
            (function () {
                // 访问正常url的流程
                var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function () {
                    // 0 1 ""
                    // 200 2 ""
                    // 200 3 "第一次输出"
                    // 200 3 "第一次输出延迟2秒后的输出"
                    // 200 3 "第一次输出延迟2秒后的输出延迟4秒后的输出"
                    // 200 4 "第一次输出延迟2秒后的输出延迟4秒后的输出"
                    console.log(this.status, this.readyState, this.response);
                    // console.log(this.getAllResponseHeaders());
                }

                xhr.open('GET', url);
                xhr.send();

            });
    </script>

    <script>
        (function () {
            // 访问不存在url
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                // 0 1 ""
                // 404 2 ""
                // 404 3 "Traceback xxx"
                // 404 4 "Traceback xxx"
                console.log(this.status, this.readyState, this.response);
            }
            xhr.addEventListener('error', function () {
                console.log('error', this.status, this.readyState, this.response);
            });

            xhr.open('GET', 'http://localhost:8210/not-exists');
            xhr.send(); // GET http://localhost:8210/not-exists 404 (Not Found)

        });
    </script>

    <script>
        (function () {
            // 超时例子
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                // 0 1 ""
                // 200 2 ""
                // 200 3 "第一次输出"
                // 0 4 ""
                console.log(this.status, this.readyState, this.response);
            }
            xhr.addEventListener('timeout', function () {
                // timeout 0 4
                console.log('timeout', this.status, this.readyState, this.response);
            });
            xhr.addEventListener('error', function () {
                console.log('error', this.status, this.readyState, this.response);
            });

            xhr.open('GET', url);
            xhr.timeout = 1000;
            xhr.send();

        });
    </script>

    <script>
        (function () {
            // 跨域
            // 验证withCredentials可以发送cookies、设置cookies
            var xhr = new XMLHttpRequest();
            var url = 'http://localhost:8090/setcookie?c=' + encodeURIComponent('random=' + Math.random());

            xhr.onreadystatechange = function () {
                console.log(this.status, this.readyState, this.response);
            }

            xhr.open('GET', url);
            xhr.withCredentials = true;
            xhr.send();

        });
    </script>

    <script>
        (function () {
            // fetch跨域
            var url = 'http://localhost:8090/setcookie?c=' + encodeURIComponent('random=' + Math.random());

            fetch(url, {
                credentials: 'same-origin',
            }).then(function(res) {
                return res.text();
            })();

        })();
    </script>


</body>

</html>